<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { addressListApi, getMedicalOrderLogistics } from '@/apis/order'
  import type { Address, ExpressData } from '@/types/order'
  import { ref } from 'vue'
  // #ifdef H5

  import AMapLoader from '@amap/amap-jsapi-loader'
  import carImg from '@/static/images/car.png'
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'
  // #endif

  function onBackClick() {
    uni.navigateBack({ delta: 1 })
  }

  // 获取地址信息
  const addressInfo = ref({} as Address)
  const getAddress = async () => {
    // 地址列表接口
    const data = await addressListApi()
    // 渲染地址列表数据
    addressInfo.value = data[0]
    console.log('-----------------', addressInfo.value)
  }
  getAddress()

  // 发送请求获取物流数据
  const props = defineProps<{
    id: string
  }>()
  const expressData = ref({} as ExpressData)
  const getExpressData = async () => {
    const res = await getMedicalOrderLogistics(props.id)
    console.log(res)
    expressData.value = res
  }

  // ------------------------ 整合高德地图
  import { onMounted, onUnmounted } from 'vue'

  let map: any = null

  onMounted(async () => {
    await getExpressData()
    // #ifdef H5
    // 拷贝一份数据进行修改
    const points = [...expressData.value.logisticsInfo]
    // 起点 - 弹出第一个
    const startPoint = points.shift()
    const start = [startPoint?.longitude, startPoint?.latitude]
    // 终点 - 弹出最后一个
    const endPoint = points.pop()
    const end = [endPoint?.longitude, endPoint?.latitude]

    // 途径点
    const waypoints = points.map((item) => {
      return [item.longitude, item.latitude]
    })

    window._AMapSecurityConfig = {
      securityJsCode: '543aa1ee533e76220e6f42adfd9cd2d8',
    }
    AMapLoader.load({
      key: '1c6aa607573302b6d652e1ca7ab7ee61', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        // 实例化地图
        map = new AMap.Map('map', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        })
        // 规划路径-------------------
        AMap.plugin('AMap.Driving', () => {
          const driving = new AMap.Driving({
            map: map, // 指定轨迹显示地图实例
            showTraffic: false, // 关闭交通状态
            hideMarkers: true, // 不显示默认图标
          })
          // // 开始位置坐标
          // const startLngLat = [116.379028, 39.865042]
          // // 结束位置坐标
          // const endLngLat = [113.227281, 22.603719]

          driving.search(start, end, { waypoints }, function (status: string, result: object) {
            // 未出错时，result即是对应的路线规划方案
          })
        })

        // ------------ 自定义maker图标
        const startMarker = new AMap.Marker({
          icon: startImg,
          position: start,
        })
        const endMarker = new AMap.Marker({
          icon: endImg,
          position: end,
        })
        const currentPoint = [
          expressData.value.currentLocationInfo.longitude,
          expressData.value.currentLocationInfo.latitude,
        ]
        const carMarker = new AMap.Marker({
          icon: carImg,
          position: currentPoint,
        })
        map.add([startMarker, endMarker, carMarker])
        // 定时聚焦 - 当前位置
        setTimeout(() => {
          map.setFitView([carMarker])
          map.setZoom(15)
        }, 3000)
      })

      .catch((e) => {
        console.log(e)
      })
    // #endif
  })

  onUnmounted(() => {
    map?.destroy()
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="map" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ expressData.statusValue }}</cover-view>
      <cover-view class="extra">
        {{ expressData.estimatedTime }} {{ expressData.name }} {{ expressData.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content">
            收货地址：{{ addressInfo.province }} {{ addressInfo.city }}{{ addressInfo.county
            }}{{ addressInfo.addressDetail }}</view
          >
        </view>
        <view class="line" v-for="(item, index) in expressData.list" :key="index">
          <view class="badge dot" v-if="item.status <= 2 || item.status == 4"> </view>
          <view class="badge icon" v-if="item.status == 3">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status == 5">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">
            {{ item.content }}
          </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
